<template>
  <div class="invoice-notice-page">
    <!-- 查询条件区域 -->
    <el-form
        :inline="true"
        class="query-form"
        label-width="80px"
        style="margin-bottom: 20px"
    >
      <el-form-item label="月份" label-width="60px">
        <el-date-picker
            v-model="queryParams.month"
            type="month"
            format="YYYY-MM"
            value-format="YYYY-MM"
            placeholder="请选择月份"
            style="width: 160px"
            clearable
        />
      </el-form-item>

      <el-form-item label="状态" label-width="60px">
        <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            style="width: 160px"
            clearable
        >
          <el-option label="未开发票" value="unissued" />
          <el-option label="已开发票" value="issued" />
          <el-option label="全部" value="all" />
        </el-select>
      </el-form-item>

      <el-form-item label="单位名号" label-width="70px">
        <el-select
            v-model="queryParams.unitId"
            placeholder="请选择单位"
            style="width: 180px"
            clearable
        >
          <el-option
              v-for="item in unitOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="通知单编号" label-width="90px">
        <el-select
            v-model="queryParams.noticeIds"
            multiple
            placeholder="请选择编号"
            style="width: 180px"
            clearable
        >
          <el-option
              v-for="item in noticeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
            type="primary"
            @click="handleQuery"
        >
          <el-icon><Search /></el-icon>
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 结果展示区域 -->
    <div class="result-container">
      <el-card
          class="notice-card"
          v-for="(notice, index) in invoiceNotices"
          :key="notice.id"
          shadow="hover"
          style="margin-bottom: 20px"
      >
        <!-- 卡片头部信息 -->
        <div class="card-header">
          <div class="header-left">
            <h3 class="card-title">开票通知单</h3>
          </div>
          <div class="header-right">
            <p class="meta-item">
              <span class="meta-label">通知单编号：</span>
              <span class="notice-number">{{ notice.noticeNumber }}</span>
            </p>
            <p class="meta-item">
              <span class="meta-label">打印日期：</span>
              {{ notice.printDate }}
            </p>
            <p class="meta-item text-danger">
              <span class="meta-label">打印次数：</span>
              {{ notice.printCount }}
            </p>
          </div>
        </div>

        <!-- 基础信息 -->
        <div class="basic-info">
          <el-descriptions
              :column="3"
              :size="small"
              class="info-descriptions"
          >
            <el-descriptions-item label="结算单位">{{ notice.settlementUnit }}</el-descriptions-item>
            <el-descriptions-item label="日期范围">{{ notice.dateRange }}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ notice.productName }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 明细表格 -->
        <div class="detail-table">
          <el-table
              :data="notice.details"
              border
              :summary-method="getSummary"
              show-summary
              style="width: 100%"
          >
            <el-table-column prop="unitPrice" label="单价" align="right" width="80">
              <template #default="{ row }">{{ formatCurrency(row.unitPrice) }}</template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" align="center" width="80" />
            <el-table-column prop="quantity" label="数量" align="right" width="100">
              <template #default="{ row }">{{ formatNumber(row.quantity) }}</template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" align="right" width="120">
              <template #default="{ row }">{{ formatCurrency(row.amount) }}</template>
            </el-table-column>
            <el-table-column prop="remarks" label="说明备注" min-width="300" />
          </el-table>
        </div>

        <!-- 发票信息填写 -->
        <div class="invoice-form">
          <el-form
              :inline="true"
              label-width="80px"
              style="margin-top: 15px"
          >
            <el-form-item label="发票日期">
              <el-date-picker
                  v-model="notice.invoiceDate"
                  type="date"
                  placeholder="请选择日期"
                  style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="发票号码">
              <el-input
                  v-model="notice.invoiceNumber"
                  placeholder="请输入发票号码"
                  style="width: 220px"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <!-- 无数据提示 -->
    <el-empty
        v-if="invoiceNotices.length === 0"
        description="未查询到相关开票通知"
        style="margin: 50px 0"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 模拟查询参数
const queryParams = ref({
  month: '2025-09',
  status: 'unissued',
  unitId: '',
  noticeIds: []
})

// 模拟单位选项
const unitOptions = ref([
  { label: 'G0202-广东同科科技有限公司', value: 'G0202' },
  { label: 'G0313-广西西途工贸', value: 'G0313' },
  { label: 'G0808-张杏', value: 'G0808' }
])

// 模拟通知单编号选项
const noticeOptions = ref([
  { label: 'G509027', value: 'G509027' },
  { label: 'G2509028', value: 'G2509028' },
  { label: 'G2509029', value: 'G2509029' }
])

// 模拟开票通知数据
const invoiceNotices = ref([
  {
    id: '1',
    noticeNumber: 'G2509003',
    printDate: '2025-09-01 16:02:18',
    printCount: 0,
    settlementUnit: 'G0313-广西西途工贸',
    dateRange: '2025-08-01 至 2025-08-30',
    productName: '蔗渣浆兴桂',
    details: [
      {
        unitPrice: 3.87,
        unit: 'KG',
        quantity: 50128,
        amount: 193995.36,
        remarks: 'PK-2025-08-00555/,PK-2025-08-00557/,PK-2025-08-00558/'
      },
      {
        unitPrice: 3.92,
        unit: 'KG',
        quantity: 72329,
        amount: 283529.68,
        remarks: 'PK-2025-08-00561/,PK-2025-09-00001/,PK-2025-08-00556/,PK-2025-08-00551/'
      }
    ],
    invoiceDate: '',
    invoiceNumber: ''
  },
  {
    id: '2',
    noticeNumber: 'G2509011',
    printDate: '2025-09-04 16:55:09',
    printCount: 0,
    settlementUnit: 'G0808-张杏',
    dateRange: '2025-09-04 至 2025-09-04',
    productName: '减速机',
    details: [
      {
        unitPrice: 3810.00,
        unit: '台',
        quantity: 1,
        amount: 3810.00,
        remarks: 'PK-2025-09-000045/'
      }
    ],
    invoiceDate: '',
    invoiceNumber: ''
  }
])

// 格式化金额（保留两位小数）
const formatCurrency = (value) => {
  return Number(value).toFixed(2).toLocaleString()
}

// 格式化数量（千分位）
const formatNumber = (value) => {
  return Number(value).toLocaleString()
}

// 表格汇总计算
const getSummary = ({ columns, data }) => {
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总计'
      return
    }
    const values = data.map(item => item[column.prop])
    if (column.prop === 'quantity') {
      sums[index] = formatNumber(values.reduce((a, b) => a + b, 0))
    } else if (column.prop === 'amount') {
      sums[index] = formatCurrency(values.reduce((a, b) => a + b, 0))
    } else {
      sums[index] = ''
    }
  })
  return sums
}

// 查询操作
const handleQuery = () => {
  // 这里替换为实际接口请求逻辑
  ElMessage.info('执行查询操作，参数：' + JSON.stringify(queryParams.value))

  // 模拟接口返回数据（示例）
  // invoiceNotices.value = await api.getInvoiceNotices(queryParams.value)
}
</script>

<style scoped>
.invoice-notice-page {
  /* 移除外边距 */
}

.query-form .el-form-item {
  margin-right: 20px;
}

.notice-card {
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.header-left .card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.header-right {
  display: flex;
  gap: 30px;
  font-size: 14px;
  color: #666;
}

.meta-item {
  margin: 0;
}

.meta-label {
  font-weight: 500;
  color: #333;
}

.notice-number {
  color: #1890ff;
  font-weight: 500;
}

.basic-info {
  padding: 15px 20px;
}

.info-descriptions .el-descriptions-item__label {
  font-weight: 500;
}

.detail-table {
  padding: 0 20px 15px;
}

.el-table {
  margin-top: 10px;
}

.el-table__header th {
  background-color: #f8f9fa;
  font-weight: 500;
}

.el-table__body td {
  vertical-align: middle;
}

.invoice-form {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
}

@media (max-width: 768px) {
  .header-right {
    flex-direction: column;
    gap: 10px;
  }

  .query-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .query-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
